<include file="public@header"/>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-page-header">
            <div class="layui-card">
                <div class="layui-page-header-content">
                    <div class="layui-card-body">
                        <div class="layui-ui-page-header-title" >
                            文章分类<span class="layui-badge-rim page-content">文章分类</span>
                        </div>
                    </div>
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this"><a href="{:url('AdminCategory/index')}">分类管理</a></li>
                            <li><a href="{:url('AdminCategory/add')}">添加分类</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-page-content">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="well form-inline margin-top-20" method="post" action="{:url('AdminCategory/index')}">
                        <div class="layui-form-item layuiadmin-card-text" style="margin-bottom: 0;">
                            <div class="layui-inline">
                                <label class="layui-form-label">分类名称</label>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" name="keyword"
                                               value="{$keyword|default=''}" placeholder="请输入分类名称">
                                    </div>
                                    <div class="layui-input-inline">
                                        <input type="submit" class="layui-btn btn-primary" value="搜索"/>
                                        <a class="layui-btn layui-btn-danger" href="{:url('AdminCategory/index')}">清空</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-page-content js-check-wrap">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form method="post" class="layui-form js-ajax-form" action="{:url('AdminCategory/listOrder')}">
                        <div class="layui-btn-container">
                            <button type="submit" class="layui-btn layui-btn-sm js-ajax-submit">{:lang('SORT')}</button>
                            <button class="layui-btn layui-btn-sm js-ajax-submit" type="submit"
                                    data-action="{:url('AdminCategory/toggle',array('display'=>'1'))}" data-subcheck="true" style="display: none;">
                                {:lang('DISPLAY')}
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-danger js-ajax-submit" type="submit"
                                    data-action="{:url('AdminCategory/toggle',array('hide'=>1))}" data-subcheck="true" style="display: none;">{:lang('HIDE')}
                            </button>
                        </div>
                        <empty name="keyword">
                            <table class="layui-table" id="menus-table" lay-even  lay-size="lg">
                                <thead>
                                <tr>
                                    <th width="16" style="padding-left:20px;">
                                        <input lay-skin="primary" lay-filter="js-check-all" type="checkbox" class="js-check-all" data-direction="x" data-checklist="js-check-x">
                                    </th>
                                    <th width="50">排序</th>
                                    <th width="50">ID</th>
                                    <th>分类名称</th>
                                    <th>描述</th>
                                    <th>状态</th>
                                    <th width="280">操作</th>
                                </tr>
                                </thead>
                                {$category_tree}
                            </table>
                        <else/>
                            <table class="layui-table" id="menus-table" lay-even lay-size="lg">
                                <thead>
                                <tr>
                                    <th width="16">
                                        <input lay-skin="primary" type="checkbox" lay-filter="js-check-all" class="js-check-all" data-direction="x" data-checklist="js-check-x">
                                    </th>
                                    <th width="50">排序</th>
                                    <th width="50">ID</th>
                                    <th>分类名称</th>
                                    <th>描述</th>
                                    <th>状态</th>
                                    <th width="240">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <foreach name="categories" item="vo">
                                    <tr>
                                        <td>
                                            <input lay-skin="primary" type="checkbox" class="js-check" data-yid="js-check-y" data-xid="js-check-x" name="ids[]" value="{$vo.id}">
                                        </td>
                                        <td>
                                            <input name="list_orders[{$vo.id}]" type="text" size="3" value="{$vo.list_order}" class="input-order">
                                        </td>
                                        <td>{$vo.id}</td>
                                        <td>{$vo.name}
                                        </td>
                                        <td>{$vo.description}</td>
                                        <td>{$vo.status?'<span class="layui-badge-dot layui-bg-function" style="margin-right: 6px;"></span>显示':'<span  class="layui-badge-dot layui-bg-abnormal" style="margin-right: 6px;"></span >隐藏'}</td>
                                        <td>
                                            <a class="layui-bo layui-bo-small layui-bo-checked str" data-title="编辑分类" data="{$vo.id}" href="javascript:;">编辑</a>
                                            <if condition="$vo['id'] gt 1">
                                                <a class="layui-bo layui-bo-small layui-bo-close js-ajax-delete" href="{:url('AdminCategory/delete',['id'=>$vo.id])}">删除</a>
                                            </if>
                                            
                                            
                                        </td>
                                    </tr>
                                </foreach>
                                </tbody>
                            </table>
                        </empty>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<include file="public@script"/>
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;
        $(document).ready(function(){
            $('.str').on('click',function(){
                //获取id
                var id = $(this).attr('data');
                var title = $(this).attr('data-title');
                //iframe层
                layer.open({
                    type: 2,
                    title: title,
                    area: ['80%', '70%'],
                    btn: ['取消'],
                    content: 'edit/id/'+id, //iframe的url
                    end: function () {
                        // location.reload();
                    }
                });
            })
        })
    });
</script>
<script>
    $(document).ready(function () {
        Wind.css('treeTable');
        Wind.use('treeTable', function () {
            $("#menus-table").treeTable({
                indent: 20,
                initialState: 'expanded'
            });
        });
    });


    // $(' #menus-table .js-check').change(function () {
    //     console.log('change');
    //     checkNode(this);
    // });
    //
    // function checkNode(obj) {
    //     var $obj   = $(obj);
    //     var $table = $obj.parents('table');
    //
    //     var id       = $obj.data('id');
    //     var parentId = $obj.data('parent_id');
    //
    //     function checkParent(id, parentId, checked) {
    //         console.log('checkParent:' + id);
    //         var $parent = $("tr [data-id='" + parentId + "']", $table);
    //         if ($parent.length > 0) {
    //             $parent.prop("checked", checked);
    //             checkParent($parent.data('id'), $parent.data('parent_id'), checked);
    //         }
    //     }
    //
    //     function checkChild(id, parentId, checked) {
    //         console.log('checkChild:' + id);
    //         var $child = $("tr [data-parent_id='" + id + "']", $table);
    //
    //         if ($child.length > 0) {
    //             $child.prop("checked", checked);
    //             checkChild($child.data('id'), $child.data('parent_id'), checked);
    //         }
    //     }
    //
    //     if ($obj.is(':checked')) {
    //         checkParent(id, parentId, true);
    //         checkChild(id, parentId, true);
    //     } else {
    //         checkParent(id, parentId, false);
    //         checkChild(id, parentId, false);
    //     }
    //     return;
    //     var chk   = $("input[type='checkbox']");
    //     var count = chk.length;
    //
    //     var num       = chk.index(obj);
    //     var level_top = level_bottom = chk.eq(num).attr('level');
    //     for (var i = num; i >= 0; i--) {
    //         var le = chk.eq(i).attr('level');
    //         if (le < level_top) {
    //             chk.eq(i).prop("checked", true);
    //             var level_top = level_top - 1;
    //         }
    //     }
    //     for (var j = num + 1; j < count; j++) {
    //         var le = chk.eq(j).attr('level');
    //         if (chk.eq(num).prop("checked")) {
    //
    //             if (le > level_bottom) {
    //                 chk.eq(j).prop("checked", true);
    //             }
    //             else if (le == level_bottom) {
    //                 break;
    //             }
    //         } else {
    //             if (le > level_bottom) {
    //                 chk.eq(j).prop("checked", false);
    //             } else if (le == level_bottom) {
    //                 break;
    //             }
    //         }
    //     }
    // }
</script>
</body>
</html>